{{define "content"}}
<div x-data="partnerForm()" x-init="init()" class="space-y-6">
    <!-- 取消编辑确认对话框 -->
    <div x-show="showCancelDialog" 
         class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6" 
             @click.away="showCancelDialog = false"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 transform scale-95"
             x-transition:enter-end="opacity-100 transform scale-100">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">确认离开页面？</h3>
                <button @click="showCancelDialog = false" class="text-gray-400 hover:text-gray-500">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg>
                </button>
            </div>
            <div class="mb-6">
                <p class="text-gray-600 mb-2">您有未保存的更改，确定要离开吗？</p>
                <p class="text-sm text-gray-500">离开页面将丢失当前未保存的内容。</p>
            </div>
            <div class="flex justify-end space-x-3">
                <button @click="showCancelDialog = false" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                    继续编辑
                </button>
                <button @click="confirmLeave()" class="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700">
                    确认离开
                </button>
            </div>
        </div>
    </div>
    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900" x-text="isEdit ? '编辑合作机构' : '添加合作机构'"></h1>
            <p class="mt-1 text-sm text-gray-500">完善机构信息，建立合作关系</p>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
            <button @click="handleCancel()" 
                    class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                返回列表
            </button>
        </div>
    </div>
    
    <!-- 功能提示 -->
    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-4">
        <div class="flex items-start space-x-3">
            <svg class="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
            </svg>
            <div class="flex-1">
                <h3 class="text-sm font-medium text-blue-800 mb-2">💡 智能表单功能</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm text-blue-700">
                    <div class="flex items-center space-x-2">
                        <svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span>自动保存草稿（24小时有效）</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span>智能城市和学科选择</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <kbd class="px-2 py-1 bg-white border border-blue-300 rounded text-xs font-mono">Ctrl+S</kbd>
                        <span>快速保存</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <kbd class="px-2 py-1 bg-white border border-blue-300 rounded text-xs font-mono">Esc</kbd>
                        <span>快速返回</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <div class="bg-white shadow rounded-lg">
        <form @submit.prevent="savePartner()">
            <!-- Form Header -->
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">机构信息</h3>
                <p class="text-sm text-gray-500">请填写完整的机构信息以便更好地进行合作</p>
            </div>

            <!-- Form Content -->
            <div class="px-6 py-6">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 基本信息 -->
                    <div class="lg:col-span-2">
                        <h4 class="text-md font-medium text-gray-900 mb-4 flex items-center">
                            <svg class="w-5 h-5 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                            </svg>
                            基本信息
                        </h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- 机构名称 -->
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    机构名称 <span class="text-red-500">*</span>
                                </label>
                                <input type="text" 
                                       x-model="form.name" 
                                       @blur="validateField('name')"
                                       required 
                                       placeholder="请输入机构名称"
                                       :class="errors.name ? 'border-red-500 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'"
                                       class="w-full border rounded-lg px-3 py-2 focus:ring-2 transition-colors">
                                <p x-show="errors.name" x-text="errors.name" class="mt-1 text-sm text-red-600"></p>
                                <p class="mt-1 text-xs text-gray-500">机构的正式名称，将用于推送和合作标识</p>
                            </div>

                            <!-- 所在城市 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    所在城市 <span class="text-red-500">*</span>
                                </label>
                                <input type="text" 
                                       x-model="form.city" 
                                       required 
                                       placeholder="请输入城市名称"
                                       class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>

                            <!-- 机构状态 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">机构状态</label>
                                <select x-model="form.status" 
                                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="active">活跃</option>
                                    <option value="inactive">停用</option>
                                </select>
                            </div>

                            <!-- 机构地址 -->
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    机构地址 <span class="text-red-500">*</span>
                                </label>
                                <input type="text" 
                                       x-model="form.address" 
                                       @blur="validateField('address')"
                                       placeholder="请输入机构详细地址"
                                       :class="errors.address ? 'border-red-500 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'"
                                       class="w-full border rounded-lg px-3 py-2 focus:ring-2 transition-colors">
                                <p x-show="errors.address" x-text="errors.address" class="mt-1 text-sm text-red-600"></p>
                                <p class="mt-1 text-xs text-gray-500">机构的详细地址信息</p>
                            </div>

                            <!-- 机构描述 -->
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">机构描述</label>
                                <textarea x-model="form.description" 
                                          rows="3" 
                                          placeholder="请简要描述机构的业务特色、优势等"
                                          class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- 联系信息 -->
                    <div class="lg:col-span-2">
                        <h4 class="text-md font-medium text-gray-900 mb-4 flex items-center">
                            <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                            联系信息
                        </h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- 联系人 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    联系人
                                </label>
                                <input type="text" 
                                       x-model="form.contact_person" 
                                       @blur="validateField('contact_person')"
                                       placeholder="请输入联系人姓名"
                                       class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                                <p x-show="errors.contact_person" x-text="errors.contact_person" class="mt-1 text-sm text-red-600"></p>
                            </div>

                            <!-- 联系电话 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    联系电话
                                </label>
                                <input type="tel" 
                                       x-model="form.phone" 
                                       @blur="validateField('phone')"
                                       placeholder="请输入联系电话"
                                       class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                                <p x-show="errors.phone" x-text="errors.phone" class="mt-1 text-sm text-red-600"></p>
                            </div>

                            <!-- 联系邮箱 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">联系邮箱</label>
                                <input type="email" 
                                       x-model="form.email" 
                                       @blur="validateField('email')"
                                       placeholder="请输入联系邮箱"
                                       :class="errors.email ? 'border-red-500 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'"
                                       class="w-full border rounded-lg px-3 py-2 focus:ring-2 transition-colors">
                                <p x-show="errors.email" x-text="errors.email" class="mt-1 text-sm text-red-600"></p>
                            </div>

                            <!-- Webhook URL -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Webhook URL</label>
                                <input type="url" 
                                       x-model="form.webhook_url" 
                                       @blur="validateField('webhook_url')"
                                       placeholder="https://example.com/webhook"
                                       :class="errors.webhook_url ? 'border-red-500 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'"
                                       class="w-full border rounded-lg px-3 py-2 focus:ring-2 transition-colors">
                                <p x-show="errors.webhook_url" x-text="errors.webhook_url" class="mt-1 text-sm text-red-600"></p>
                                <p class="mt-1 text-xs text-gray-500">用于接收客户推送数据的接口地址</p>
                            </div>
                        </div>
                    </div>

                    <!-- 业务配置 -->
                    <div class="lg:col-span-2">
                        <h4 class="text-md font-medium text-gray-900 mb-4 flex items-center">
                            <svg class="w-5 h-5 text-purple-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            业务配置
                        </h4>
                        
                        <!-- 城市校区 -->
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-2">城市校区</label>
                            <textarea x-model="form.cities" 
                                      rows="4" 
                                      placeholder="请输入机构支持的城市校区，每行一个或用逗号分隔"
                                      :class="errors.cities ? 'border-red-500 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'"
                                      class="w-full border rounded-lg px-3 py-2 focus:ring-2 transition-colors"></textarea>
                            <p x-show="errors.cities" x-text="errors.cities" class="mt-2 text-sm text-red-600"></p>
                            <p class="mt-2 text-xs text-gray-500">
                                <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                输入该机构可以接收客户的校区范围，支持多行输入或逗号分隔
                            </p>
                            <!-- 城市校区案例 -->
                            <div class="mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
                                <h5 class="text-sm font-medium text-gray-700 mb-2 flex items-center">
                                    <svg class="w-4 h-4 text-blue-500 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                                    </svg>
                                    录入案例参考
                                </h5>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
                                    <div>
                                        <p class="font-medium text-gray-600 mb-1">🏢 新东方上海校区：</p>
                                        <p class="text-gray-500 font-mono bg-white px-2 py-1 rounded border">上海徐汇区,上海黄浦区,上海静安区,上海长宁区,上海普陀区,上海虹口区,上海杨浦区,上海浦东新区</p>
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-600 mb-1">🏢 新东方北京校区：</p>
                                        <p class="text-gray-500 font-mono bg-white px-2 py-1 rounded border">北京海淀区,北京朝阳区,北京西城区,北京东城区,北京丰台区</p>
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-600 mb-1">🏢 新东方广州校区：</p>
                                        <p class="text-gray-500 font-mono bg-white px-2 py-1 rounded border">广州天河区,广州越秀区,广州海珠区,广州荔湾区,广州白云区,广州黄埔区,广州番禺区</p>
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-600 mb-1">🏢 新东方深圳校区：</p>
                                        <p class="text-gray-500 font-mono bg-white px-2 py-1 rounded border">深圳福田区,深圳罗湖区,深圳南山区,深圳宝安区,深圳龙岗区,深圳龙华区</p>
                                    </div>
                                </div>
                                <div class="mt-2 pt-2 border-t border-gray-200">
                                    <p class="text-xs text-gray-500">
                                        <span class="font-medium">💡 录入建议：</span>
                                        可以按照"城市+区域"的格式录入，用逗号分隔多个校区，便于系统进行精准匹配和客户推送
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- 接收学科 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">接收学科</label>
                            <textarea x-model="form.subjects" 
                                      rows="4" 
                                      placeholder="请输入机构接收的学科，每行一个或用逗号分隔"
                                      :class="errors.subjects ? 'border-red-500 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'"
                                      class="w-full border rounded-lg px-3 py-2 focus:ring-2 transition-colors"></textarea>
                            <p x-show="errors.subjects" x-text="errors.subjects" class="mt-2 text-sm text-red-600"></p>
                            <p class="mt-2 text-xs text-gray-500">
                                <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                输入该机构可以接收的学科范围，支持多行输入或逗号分隔
                            </p>
                            <!-- 接收学科案例 -->
                            <div class="mt-3 p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg border border-blue-200">
                                <h5 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                    <svg class="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                                    </svg>
                                    录入案例参考
                                </h5>
                                
                                <!-- 机构示例切换标签 -->
                                <div class="mb-4" x-data="{ activeTab: 'xdf' }">
                                    <!-- 标签页导航 -->
                                    <div class="flex border-b border-gray-200 mb-3">
                                        <button type="button" @click="activeTab = 'xdf'" 
                                                :class="activeTab === 'xdf' ? 'border-blue-500 text-blue-600 bg-blue-50' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                                                class="px-4 py-2 text-xs font-medium border-b-2 transition-colors duration-200">
                                            <span class="flex items-center">
                                                <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
                                                新东方示例
                                            </span>
                                        </button>
                                        <button type="button" @click="activeTab = 'xueda'" 
                                                :class="activeTab === 'xueda' ? 'border-green-500 text-green-600 bg-green-50' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                                                class="px-4 py-2 text-xs font-medium border-b-2 transition-colors duration-200 ml-2">
                                            <span class="flex items-center">
                                                <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                                                学大教育示例
                                            </span>
                                        </button>
                                    </div>
                                    
                                    <!-- 新东方培训学科示例 -->
                                    <div x-show="activeTab === 'xdf'" 
                                         x-transition:enter="transition ease-out duration-200"
                                         x-transition:enter-start="opacity-0 transform translate-y-2"
                                         x-transition:enter-end="opacity-100 transform translate-y-0"
                                         class="p-3 bg-white rounded-lg border border-gray-200 shadow-sm">
                                        <div class="flex items-center justify-between mb-2">
                                            <div class="flex items-center">
                                                <span class="text-xs font-medium text-blue-600 bg-blue-100 px-2 py-1 rounded-full mr-2">新东方示例</span>
                                                <span class="text-xs text-gray-500">语言培训为主</span>
                                            </div>
                                            <button type="button" @click="insertBatchSubjects(['英语','托福','雅思','SAT','GRE','GMAT','考研英语','四六级','少儿英语','中学英语','小学英语','语文','数学','物理','化学','生物'])" 
                                                    class="text-xs bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded transition-colors duration-200 flex items-center">
                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                                </svg>
                                                批量插入
                                            </button>
                                        </div>
                                        <div class="flex flex-wrap gap-1 text-xs">
                                            <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('英语')">英语</span>
                                            <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('托福')">托福</span>
                                            <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('雅思')">雅思</span>
                                            <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('SAT')">SAT</span>
                                            <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('GRE')">GRE</span>
                                            <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('GMAT')">GMAT</span>
                                            <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('考研英语')">考研英语</span>
                                            <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('四六级')">四六级</span>
                                            <span class="bg-green-50 text-green-700 px-2 py-1 rounded border cursor-pointer hover:bg-green-100 transition-colors" @click="insertSubject('少儿英语')">少儿英语</span>
                                            <span class="bg-green-50 text-green-700 px-2 py-1 rounded border cursor-pointer hover:bg-green-100 transition-colors" @click="insertSubject('中学英语')">中学英语</span>
                                            <span class="bg-green-50 text-green-700 px-2 py-1 rounded border cursor-pointer hover:bg-green-100 transition-colors" @click="insertSubject('小学英语')">小学英语</span>
                                            <span class="bg-purple-50 text-purple-700 px-2 py-1 rounded border cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('语文')">语文</span>
                                            <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('数学')">数学</span>
                                            <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('物理')">物理</span>
                                            <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('化学')">化学</span>
                                            <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('生物')">生物</span>
                                        </div>
                                    </div>
                                    
                                    <!-- 学大教育培训学科示例 -->
                                    <div x-show="activeTab === 'xueda'" 
                                         x-transition:enter="transition ease-out duration-200"
                                         x-transition:enter-start="opacity-0 transform translate-y-2"
                                         x-transition:enter-end="opacity-100 transform translate-y-0"
                                         class="p-3 bg-white rounded-lg border border-gray-200 shadow-sm">
                                        <div class="flex items-center justify-between mb-2">
                                            <div class="flex items-center">
                                                <span class="text-xs font-medium text-green-600 bg-green-100 px-2 py-1 rounded-full mr-2">学大教育示例</span>
                                                <span class="text-xs text-gray-500">个性化辅导为主</span>
                                            </div>
                                            <button type="button" @click="insertBatchSubjects(['小学数学','初中数学','高中数学','小学语文','初中语文','高中语文','小学英语','初中英语','高中英语','初中物理','高中物理','初中化学','高中化学','高中生物','中考冲刺','高考冲刺'])" 
                                                    class="text-xs bg-green-500 hover:bg-green-600 text-white px-2 py-1 rounded transition-colors duration-200 flex items-center">
                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                                </svg>
                                                批量插入
                                            </button>
                                        </div>
                                        <div class="flex flex-wrap gap-1 text-xs">
                                            <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('小学数学')">小学数学</span>
                                            <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('初中数学')">初中数学</span>
                                            <span class="bg-orange-50 text-orange-700 px-2 py-1 rounded border cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('高中数学')">高中数学</span>
                                            <span class="bg-purple-50 text-purple-700 px-2 py-1 rounded border cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('小学语文')">小学语文</span>
                                            <span class="bg-purple-50 text-purple-700 px-2 py-1 rounded border cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('初中语文')">初中语文</span>
                                            <span class="bg-purple-50 text-purple-700 px-2 py-1 rounded border cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('高中语文')">高中语文</span>
                                            <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('小学英语')">小学英语</span>
                                            <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('初中英语')">初中英语</span>
                                            <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded border cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('高中英语')">高中英语</span>
                                            <span class="bg-red-50 text-red-700 px-2 py-1 rounded border cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('初中物理')">初中物理</span>
                                            <span class="bg-red-50 text-red-700 px-2 py-1 rounded border cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('高中物理')">高中物理</span>
                                            <span class="bg-red-50 text-red-700 px-2 py-1 rounded border cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('初中化学')">初中化学</span>
                                            <span class="bg-red-50 text-red-700 px-2 py-1 rounded border cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('高中化学')">高中化学</span>
                                            <span class="bg-teal-50 text-teal-700 px-2 py-1 rounded border cursor-pointer hover:bg-teal-100 transition-colors" @click="insertSubject('高中生物')">高中生物</span>
                                            <span class="bg-gray-50 text-gray-700 px-2 py-1 rounded border cursor-pointer hover:bg-gray-100 transition-colors" @click="insertSubject('中考冲刺')">中考冲刺</span>
                                            <span class="bg-gray-50 text-gray-700 px-2 py-1 rounded border cursor-pointer hover:bg-gray-100 transition-colors" @click="insertSubject('高考冲刺')">高考冲刺</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 学科分类示例 -->
                                <div class="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-4">
                                    <div class="bg-white p-3 rounded-lg border border-gray-200 shadow-sm">
                                        <div class="flex items-center justify-between mb-2">
                                            <h6 class="text-xs font-semibold text-gray-600 flex items-center">
                                                <span class="w-2 h-2 bg-blue-400 rounded-full mr-2"></span>
                                                语言 & 考试类
                                            </h6>
                                            <button type="button" @click="insertBatchSubjects(['英语','日语','韩语','法语','口语','PET','考研','考公','托福','雅思','四六级'])" 
                                                    class="text-xs bg-blue-400 hover:bg-blue-500 text-white px-2 py-1 rounded transition-colors duration-200 flex items-center">
                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                                </svg>
                                                批量插入
                                            </button>
                                        </div>
                                        <div class="flex flex-wrap gap-1 text-xs">
                                            <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('英语')">英语</span>
                                            <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('日语')">日语</span>
                                            <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('韩语')">韩语</span>
                                            <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('法语')">法语</span>
                                            <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('口语')">口语</span>
                                            <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded cursor-pointer hover:bg-blue-100 transition-colors" @click="insertSubject('PET')">PET</span>
                                            <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('考研')">考研</span>
                                            <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('考公')">考公</span>
                                            <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('托福')">托福</span>
                                            <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('雅思')">雅思</span>
                                            <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('四六级')">四六级</span>
                                        </div>
                                    </div>
                                    
                                    <div class="bg-white p-3 rounded-lg border border-gray-200 shadow-sm">
                                        <div class="flex items-center justify-between mb-2">
                                            <h6 class="text-xs font-semibold text-gray-600 flex items-center">
                                                <span class="w-2 h-2 bg-green-400 rounded-full mr-2"></span>
                                                学科 & 辅导类
                                            </h6>
                                            <button type="button" @click="insertBatchSubjects(['数学','物理','化学','生物','语文','历史','地理','政治','小学辅导','高中辅导','高中复读'])" 
                                                    class="text-xs bg-green-400 hover:bg-green-500 text-white px-2 py-1 rounded transition-colors duration-200 flex items-center">
                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                                </svg>
                                                批量插入
                                            </button>
                                        </div>
                                        <div class="flex flex-wrap gap-1 text-xs">
                                            <span class="bg-orange-50 text-orange-600 px-2 py-1 rounded cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('数学')">数学</span>
                                            <span class="bg-orange-50 text-orange-600 px-2 py-1 rounded cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('物理')">物理</span>
                                            <span class="bg-orange-50 text-orange-600 px-2 py-1 rounded cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('化学')">化学</span>
                                            <span class="bg-orange-50 text-orange-600 px-2 py-1 rounded cursor-pointer hover:bg-orange-100 transition-colors" @click="insertSubject('生物')">生物</span>
                                            <span class="bg-purple-50 text-purple-600 px-2 py-1 rounded cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('语文')">语文</span>
                                            <span class="bg-purple-50 text-purple-600 px-2 py-1 rounded cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('历史')">历史</span>
                                            <span class="bg-purple-50 text-purple-600 px-2 py-1 rounded cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('地理')">地理</span>
                                            <span class="bg-purple-50 text-purple-600 px-2 py-1 rounded cursor-pointer hover:bg-purple-100 transition-colors" @click="insertSubject('政治')">政治</span>
                                            <span class="bg-green-50 text-green-600 px-2 py-1 rounded cursor-pointer hover:bg-green-100 transition-colors" @click="insertSubject('小学辅导')">小学辅导</span>
                                            <span class="bg-green-50 text-green-600 px-2 py-1 rounded cursor-pointer hover:bg-green-100 transition-colors" @click="insertSubject('高中辅导')">高中辅导</span>
                                            <span class="bg-green-50 text-green-600 px-2 py-1 rounded cursor-pointer hover:bg-green-100 transition-colors" @click="insertSubject('高中复读')">高中复读</span>
                                        </div>
                                    </div>
                                    
                                    <div class="bg-white p-3 rounded-lg border border-gray-200 shadow-sm">
                                        <div class="flex items-center justify-between mb-2">
                                            <h6 class="text-xs font-semibold text-gray-600 flex items-center">
                                                <span class="w-2 h-2 bg-pink-400 rounded-full mr-2"></span>
                                                特长 & 技能类
                                            </h6>
                                            <button type="button" @click="insertBatchSubjects(['美术','音乐','舞蹈','书法','绘画','篮球','足球','游泳','编程','机器人','会计','设计'])" 
                                                    class="text-xs bg-pink-400 hover:bg-pink-500 text-white px-2 py-1 rounded transition-colors duration-200 flex items-center">
                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                                </svg>
                                                批量插入
                                            </button>
                                        </div>
                                        <div class="flex flex-wrap gap-1 text-xs">
                                            <span class="bg-pink-50 text-pink-600 px-2 py-1 rounded cursor-pointer hover:bg-pink-100 transition-colors" @click="insertSubject('美术')">美术</span>
                                            <span class="bg-pink-50 text-pink-600 px-2 py-1 rounded cursor-pointer hover:bg-pink-100 transition-colors" @click="insertSubject('音乐')">音乐</span>
                                            <span class="bg-pink-50 text-pink-600 px-2 py-1 rounded cursor-pointer hover:bg-pink-100 transition-colors" @click="insertSubject('舞蹈')">舞蹈</span>
                                            <span class="bg-pink-50 text-pink-600 px-2 py-1 rounded cursor-pointer hover:bg-pink-100 transition-colors" @click="insertSubject('书法')">书法</span>
                                            <span class="bg-pink-50 text-pink-600 px-2 py-1 rounded cursor-pointer hover:bg-pink-100 transition-colors" @click="insertSubject('绘画')">绘画</span>
                                            <span class="bg-indigo-50 text-indigo-600 px-2 py-1 rounded cursor-pointer hover:bg-indigo-100 transition-colors" @click="insertSubject('篮球')">篮球</span>
                                            <span class="bg-indigo-50 text-indigo-600 px-2 py-1 rounded cursor-pointer hover:bg-indigo-100 transition-colors" @click="insertSubject('足球')">足球</span>
                                            <span class="bg-indigo-50 text-indigo-600 px-2 py-1 rounded cursor-pointer hover:bg-indigo-100 transition-colors" @click="insertSubject('游泳')">游泳</span>
                                            <span class="bg-yellow-50 text-yellow-700 px-2 py-1 rounded cursor-pointer hover:bg-yellow-100 transition-colors" @click="insertSubject('编程')">编程</span>
                                            <span class="bg-yellow-50 text-yellow-700 px-2 py-1 rounded cursor-pointer hover:bg-yellow-100 transition-colors" @click="insertSubject('机器人')">机器人</span>
                                            <span class="bg-gray-50 text-gray-600 px-2 py-1 rounded cursor-pointer hover:bg-gray-100 transition-colors" @click="insertSubject('会计')">会计</span>
                                            <span class="bg-gray-50 text-gray-600 px-2 py-1 rounded cursor-pointer hover:bg-gray-100 transition-colors" @click="insertSubject('设计')">设计</span>
                                        </div>
                                    </div>
                                    
                                    <div class="bg-white p-3 rounded-lg border border-gray-200 shadow-sm">
                                        <div class="flex items-center justify-between mb-2">
                                            <h6 class="text-xs font-semibold text-gray-600 flex items-center">
                                                <span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span>
                                                考证 & 事业编
                                            </h6>
                                            <button type="button" @click="insertBatchSubjects(['教师资格证','会计师','建造师','人力资源师','普通话','事业单位','教师招聘'])" 
                                                    class="text-xs bg-amber-400 hover:bg-amber-500 text-white px-2 py-1 rounded transition-colors duration-200 flex items-center">
                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                                </svg>
                                                批量插入
                                            </button>
                                        </div>
                                        <div class="flex flex-wrap gap-1 text-xs">
                                            <span class="bg-amber-50 text-amber-600 px-2 py-1 rounded cursor-pointer hover:bg-amber-100 transition-colors" @click="insertSubject('教师资格证')">教师资格证</span>
                                            <span class="bg-amber-50 text-amber-600 px-2 py-1 rounded cursor-pointer hover:bg-amber-100 transition-colors" @click="insertSubject('会计师')">会计师</span>
                                            <span class="bg-amber-50 text-amber-600 px-2 py-1 rounded cursor-pointer hover:bg-amber-100 transition-colors" @click="insertSubject('建造师')">建造师</span>
                                            <span class="bg-amber-50 text-amber-600 px-2 py-1 rounded cursor-pointer hover:bg-amber-100 transition-colors" @click="insertSubject('人力资源师')">人力资源师</span>
                                            <span class="bg-teal-50 text-teal-600 px-2 py-1 rounded cursor-pointer hover:bg-teal-100 transition-colors" @click="insertSubject('普通话')">普通话</span>
                                            <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('事业单位')">事业单位</span>
                                            <span class="bg-red-50 text-red-600 px-2 py-1 rounded cursor-pointer hover:bg-red-100 transition-colors" @click="insertSubject('教师招聘')">教师招聘</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 录入建议 -->
                                <div class="bg-amber-50 border border-amber-200 rounded-lg p-3">
                                    <div class="flex items-start">
                                        <svg class="w-4 h-4 text-amber-500 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        <div class="text-xs text-amber-700">
                                            <span class="font-medium">💡 录入建议：</span>
                                            <span class="text-amber-600">• 使用逗号分隔：英语,数学,物理,化学 • 每行一个学科：换行输入，系统自动处理 • 参考分类：可按上述分类选择适合的学科组合</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Footer -->
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
                <!-- 表单状态提示 -->
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center text-sm text-gray-500">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <span>带 <span class="text-red-500">*</span> 的字段为必填项</span>
                    </div>
                    
                    <!-- 表单验证状态 -->
                    <div class="flex items-center text-sm">
                        <template x-if="Object.keys(errors).length === 0 && (form.name || form.contact_person || form.phone)">
                            <div class="flex items-center text-green-600">
                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                <span>表单填写完整</span>
                            </div>
                        </template>
                        <template x-if="Object.keys(errors).length > 0">
                            <div class="flex items-center text-red-600">
                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                <span x-text="`发现 ${Object.keys(errors).length} 个错误`"></span>
                            </div>
                        </template>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="flex justify-end space-x-3">
                    <a href="/partners" 
                       class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors">
                        取消
                    </a>
                    <button type="submit" 
                            :disabled="loading || Object.keys(errors).length > 0"
                            :class="Object.keys(errors).length > 0 ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'"
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 transition-colors">
                        <svg class="w-4 h-4 mr-2 animate-spin" x-show="loading" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                        </svg>
                        <svg class="w-4 h-4 mr-2" x-show="!loading" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
                        </svg>
                        <span x-text="loading ? '保存中...' : (isEdit ? '更新机构' : '创建机构')"></span>
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 预览卡片 -->
    <div class="bg-white shadow rounded-lg" x-show="form.name">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">信息预览</h3>
            <p class="text-sm text-gray-500">预览机构信息卡片效果</p>
        </div>
        <div class="p-6">
            <div class="border border-gray-200 rounded-lg p-4">
                <div class="flex items-start space-x-4">
                    <div class="flex-shrink-0">
                        <div class="h-12 w-12 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg" 
                             x-text="form.name ? form.name.charAt(0) : '机'"></div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-lg font-medium text-gray-900" x-text="form.name || '机构名称'"></h4>
                        <p class="text-sm text-gray-500" x-text="form.city || '所在城市'"></p>
                        <p class="text-sm text-gray-600 mt-1" x-text="form.description || '机构描述'"></p>
                        
                        <div class="mt-3 flex flex-wrap gap-2">
                            <template x-for="subject in form.subjects" :key="subject">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800" x-text="subject"></span>
                            </template>
                        </div>
                        
                        <div class="mt-2 text-sm text-gray-500">
                            <span x-show="form.contact_person">联系人：<span x-text="form.contact_person"></span></span>
                            <span x-show="form.phone" class="ml-4">电话：<span x-text="form.phone"></span></span>
                        </div>
                    </div>
                    <div class="flex-shrink-0">
                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full" 
                              :class="form.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'" 
                              x-text="form.status === 'active' ? '活跃' : '停用'"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function partnerForm() {
    return {
        loading: false,
        isEdit: false,
        partnerId: null,
        showCancelDialog: false,
        hasUnsavedChanges: false,
        
        // 表单数据
        form: {
            name: '',
            city: '',
            status: 'active',
            contact_person: '',
            phone: '',
            email: '',
            webhook_url: '',
            cities: [],
            subjects: [],
            description: '',
            address: ''
        },
        
        // 临时输入
        newCity: '',
        newSubject: '',
        
        // 城市相关数据
        citySuggestions: [],
        presetCities: [
            {
                name: '上海市',
                districts: [
                    '黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', 
                    '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', 
                    '浦东新区', '金山区', '松江区'
                ]
            }
        ],
        allCitySuggestions: [
            // 上海市区县
            '黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '虹口区', '杨浦区',
            '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区',
            // 其他常用城市
            '北京市', '天津市', '重庆市', '广州市', '深圳市', '杭州市', '南京市',
            '苏州市', '武汉市', '成都市', '西安市', '郑州市', '济南市', '青岛市',
            '大连市', '沈阳市', '长春市', '哈尔滨市', '石家庄市', '太原市',
            '呼和浩特市', '兰州市', '西宁市', '银川市', '乌鲁木齐市', '拉萨市',
            '昆明市', '贵阳市', '南宁市', '海口市', '三亚市', '福州市', '厦门市',
            '南昌市', '长沙市', '合肥市', '芜湖市', '无锡市', '常州市', '扬州市',
            '南通市', '徐州市', '连云港市', '淮安市', '盐城市', '泰州市', '宿迁市'
        ],
        
        // 常用学科
        commonSubjects: [
            {
                category: '主要学科',
                subjects: ['数学', '语文', '英语', '物理', '化学', '生物']
            },
            {
                category: '文科',
                subjects: ['历史', '地理', '政治', '哲学', '法学']
            },
            {
                category: '艺术体育',
                subjects: ['音乐', '美术', '体育', '舞蹈', '书法']
            },
            {
                category: '技术类',
                subjects: ['信息技术', '通用技术', '编程', '机器人']
            },
            {
                category: '其他',
                subjects: ['心理健康', '生涯规划', '社会实践', '研学旅行']
            }
        ],
        subjectSuggestions: [],
        allSubjectSuggestions: [
            '数学', '语文', '英语', '物理', '化学', '生物', '历史', '地理', '政治',
            '哲学', '法学', '音乐', '美术', '体育', '舞蹈', '书法', '信息技术',
            '通用技术', '编程', '机器人', '心理健康', '生涯规划', '社会实践',
            '研学旅行', '科学', '自然', '社会', '道德与法治', '品德与社会',
            '综合实践', '劳动技术', '安全教育', '环境教育', '国防教育'
        ],
        
        // 初始化
        init() {
            // 检查是否为编辑模式
            const urlParams = new URLSearchParams(window.location.search);
            this.partnerId = urlParams.get('id');
            this.isEdit = !!this.partnerId;
            
            if (this.isEdit) {
                this.loadPartner();
            } else {
                // 新建模式，尝试加载草稿
                this.loadDraft();
            }
            
            // 设置自动保存草稿
            this.setupAutoSave();
            
            // 设置键盘快捷键
            this.setupKeyboardShortcuts();
        },
        
        // 自动保存草稿
                setupAutoSave() {
                    // 监听表单变化，自动保存草稿
                    this.$watch('form', () => {
                        this.hasUnsavedChanges = true;
                        this.saveDraft();
                    }, { deep: true });
                },
        
        // 保存草稿到本地存储
        saveDraft() {
            try {
                const draft = {
                    ...this.form,
                    timestamp: Date.now()
                };
                localStorage.setItem('partner_form_draft', JSON.stringify(draft));
            } catch (error) {
                console.warn('无法保存草稿:', error);
            }
        },
        
        // 加载草稿
        loadDraft() {
            try {
                const draftStr = localStorage.getItem('partner_form_draft');
                if (draftStr) {
                    const draft = JSON.parse(draftStr);
                    // 检查草稿是否在24小时内
                    if (Date.now() - draft.timestamp < 24 * 60 * 60 * 1000) {
                        delete draft.timestamp;
                        this.form = { ...this.form, ...draft };
                        this.showToast('已恢复上次编辑的草稿', 'info');
                    }
                }
            } catch (error) {
                console.warn('无法加载草稿:', error);
            }
        },
        
        // 清除草稿
        clearDraft() {
            try {
                localStorage.removeItem('partner_form_draft');
            } catch (error) {
                console.warn('无法清除草稿:', error);
            }
        },
        
        // 设置键盘快捷键
                setupKeyboardShortcuts() {
                    document.addEventListener('keydown', (e) => {
                        // Ctrl+S 保存
                        if (e.ctrlKey && e.key === 's') {
                            e.preventDefault();
                            this.savePartner();
                        }
                        // Esc 取消
                        if (e.key === 'Escape') {
                            this.handleCancel();
                        }
                    });
                    
                    // 监听页面关闭事件
                    window.addEventListener('beforeunload', (e) => {
                        if (this.hasUnsavedChanges && !this.isEdit) {
                            e.preventDefault();
                            e.returnValue = '您有未保存的更改，确定要离开吗？';
                            return e.returnValue;
                        }
                    });
                },
                
                // 处理取消操作
                handleCancel() {
                    if (this.hasUnsavedChanges) {
                        this.showCancelDialog = true;
                    } else {
                        window.history.back();
                    }
                },
                
                // 确认离开
                confirmLeave() {
                    this.clearDraft();
                    this.hasUnsavedChanges = false;
                    this.showCancelDialog = false;
                    window.history.back();
                },
        
        // 加载机构信息（编辑模式）
        async loadPartner() {
            try {
                this.loading = true;
                const response = await fetch(`/api/v1/partners/${this.partnerId}`);
                const data = await response.json();
                
                if (data.code === 200) {
                    this.form = {
                        ...data.data,
                        cities: data.data.cities || [],
                        subjects: data.data.subjects || []
                    };
                } else {
                    this.showToast(data.message || '加载机构信息失败', 'error');
                    window.location.href = '/partners';
                }
            } catch (error) {
                this.showToast('网络错误', 'error');
                window.location.href = '/partners';
            } finally {
                this.loading = false;
            }
        },
        
        // 保存机构
        async savePartner() {
            if (!this.validateForm()) {
                // 滚动到第一个错误字段
                const firstErrorField = document.querySelector('.border-red-500');
                if (firstErrorField) {
                    firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    firstErrorField.focus();
                }
                return;
            }
            
            try {
                this.loading = true;
                
                // 准备提交数据
                const submitData = {
                    ...this.form,
                    // 清理电话号码格式
                    phone: this.form.phone.replace(/[\s-]/g, ''),
                    // 确保数组不为空
                    cities: this.form.cities.length > 0 ? this.form.cities : [],
                    subjects: this.form.subjects.length > 0 ? this.form.subjects : []
                };
                
                const url = this.isEdit ? `/api/v1/partners/${this.partnerId}` : '/api/v1/partners';
                const method = this.isEdit ? 'PUT' : 'POST';
                
                const response = await fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(submitData)
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    // 清除草稿和未保存状态
                    this.clearDraft();
                    this.hasUnsavedChanges = false;
                    
                    // 显示成功消息
                    const message = this.isEdit ? '机构信息更新成功！' : '机构创建成功！';
                    this.showToast(message, 'success');
                    
                    // 延迟跳转，让用户看到成功消息
                    setTimeout(() => {
                        if (this.isEdit) {
                            window.location.href = `/partners/detail?id=${this.partnerId}`;
                        } else {
                            window.location.href = '/partners';
                        }
                    }, 1500);
                } else {
                    this.showToast(data.message || '操作失败，请重试', 'error');
                }
            } catch (error) {
                console.error('提交失败:', error);
                this.showToast('网络错误，请检查连接后重试', 'error');
            } finally {
                this.loading = false;
            }
        },
        
        // 错误状态
        errors: {},
        
        // 表单验证
        validateForm() {
            this.errors = {};
            
            // 基本信息验证
            if (!this.form.name.trim()) {
                this.errors.name = '机构名称不能为空';
            } else if (this.form.name.trim().length < 2) {
                this.errors.name = '机构名称至少需要2个字符';
            }
            
            if (!this.form.city.trim()) {
                this.errors.city = '所在城市不能为空';
            }
            
            if (!this.form.address.trim()) {
                this.errors.address = '机构地址不能为空';
            } else if (this.form.address.trim().length < 5) {
                this.errors.address = '机构地址至少需要5个字符';
            }
            
            // 联系信息验证（可选字段）
            if (this.form.contact_person.trim() && this.form.contact_person.trim().length < 2) {
                this.errors.contact_person = '联系人姓名至少需要2个字符';
            }
            
            if (this.form.phone.trim()) {
                // 验证电话格式
                const phoneRegex = /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/;
                if (!phoneRegex.test(this.form.phone.replace(/[\s-]/g, ''))) {
                    this.errors.phone = '请输入正确的电话号码格式';
                }
            }
            
            // 验证邮箱格式（如果填写了）
            if (this.form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.email)) {
                this.errors.email = '请输入正确的邮箱地址格式';
            }
            
            // Webhook URL验证（可选）
            if (this.form.webhook_url.trim() && !/^https?:\/\/.+/.test(this.form.webhook_url)) {
                this.errors.webhook_url = '请输入正确的URL格式（以http://或https://开头）';
            }
            
            // 业务配置验证
            if (this.form.cities.length === 0) {
                this.errors.cities = '请至少选择一个支持城市';
            } else if (this.form.cities.length > 50) {
                this.errors.cities = '支持城市数量不能超过50个';
            }
            
            if (this.form.subjects.length === 0) {
                this.errors.subjects = '请至少选择一个接收学科';
            } else if (this.form.subjects.length > 30) {
                this.errors.subjects = '接收学科数量不能超过30个';
            }
            
            // 如果有错误，显示第一个错误信息
            const errorKeys = Object.keys(this.errors);
            if (errorKeys.length > 0) {
                this.showToast(this.errors[errorKeys[0]], 'error');
                return false;
            }
            
            return true;
        },
        
        // 实时验证单个字段
        validateField(fieldName) {
            const tempErrors = { ...this.errors };
            delete tempErrors[fieldName];
            this.errors = tempErrors;
            
            // 重新验证该字段
            this.validateForm();
        },
        
        // 城市管理
        addCity() {
            const city = this.newCity.trim();
            if (city && !this.form.cities.includes(city)) {
                this.form.cities.push(city);
                this.newCity = '';
                this.citySuggestions = [];
            }
        },
        
        removeCity(city) {
            this.form.cities = this.form.cities.filter(c => c !== city);
        },
        
        toggleCity(city) {
            if (this.form.cities.includes(city)) {
                this.removeCity(city);
            } else {
                this.form.cities.push(city);
            }
        },
        
        filterCitySuggestions() {
            const input = this.newCity.toLowerCase();
            if (input.length > 0) {
                this.citySuggestions = this.allCitySuggestions
                    .filter(city => city.toLowerCase().includes(input))
                    .slice(0, 10);
            } else {
                this.citySuggestions = [];
            }
        },
        
        selectCitySuggestion(city) {
            this.newCity = city;
            this.addCity();
        },
        
        selectAllShanghaiDistricts() {
            const shanghaiDistricts = this.presetCities[0].districts;
            shanghaiDistricts.forEach(district => {
                if (!this.form.cities.includes(district)) {
                    this.form.cities.push(district);
                }
            });
        },
        
        clearAllCities() {
            this.form.cities = [];
        },
        
        // 学科管理
        addSubject() {
            const subject = this.newSubject.trim();
            if (subject && !this.form.subjects.includes(subject)) {
                this.form.subjects.push(subject);
                this.newSubject = '';
                this.subjectSuggestions = [];
            }
        },
        
        insertSubject(subject) {
            // 确保subjects是字符串类型
            let currentValue = '';
            if (Array.isArray(this.form.subjects)) {
                currentValue = this.form.subjects.join(', ');
            } else {
                currentValue = this.form.subjects || '';
            }
            
            // 检查是否已经包含该学科（忽略大小写和空格）
            const subjects = currentValue.split(/[,\n]/).map(s => s.trim()).filter(s => s);
            const normalizedSubjects = subjects.map(s => s.toLowerCase().replace(/\s+/g, ''));
            const normalizedNewSubject = subject.toLowerCase().replace(/\s+/g, '');
            
            if (normalizedSubjects.includes(normalizedNewSubject)) {
                this.showToast(`学科"${subject}"已存在，无需重复添加`, 'info');
                return; // 如果已存在，不重复添加
            }
            
            // 添加学科到文本框
            if (currentValue.trim() === '') {
                this.form.subjects = subject;
            } else {
                // 如果最后一个字符不是逗号或换行，添加逗号
                const lastChar = currentValue.slice(-1);
                if (lastChar !== ',' && lastChar !== '\n') {
                    this.form.subjects = currentValue + ', ' + subject;
                } else {
                    this.form.subjects = currentValue + subject;
                }
            }
        },
        
        insertBatchSubjects(subjectList) {
            // 确保subjects是字符串类型
            let currentValue = '';
            if (Array.isArray(this.form.subjects)) {
                currentValue = this.form.subjects.join(', ');
            } else {
                currentValue = this.form.subjects || '';
            }
            
            // 获取当前已有的学科列表
            const existingSubjects = currentValue.split(/[,\n]/).map(s => s.trim()).filter(s => s);
            const normalizedExistingSubjects = existingSubjects.map(s => s.toLowerCase().replace(/\s+/g, ''));
            
            // 过滤掉已存在的学科（忽略大小写和空格）
            const newSubjects = subjectList.filter(subject => {
                const normalizedSubject = subject.toLowerCase().replace(/\s+/g, '');
                return !normalizedExistingSubjects.includes(normalizedSubject);
            });
            
            if (newSubjects.length === 0) {
                this.showToast('所选学科已全部存在，无需重复添加', 'info');
                return;
            }
            
            // 批量添加学科
            if (currentValue.trim() === '') {
                this.form.subjects = newSubjects.join(', ');
            } else {
                // 如果最后一个字符不是逗号或换行，添加逗号
                const lastChar = currentValue.slice(-1);
                if (lastChar !== ',' && lastChar !== '\n') {
                    this.form.subjects = currentValue + ', ' + newSubjects.join(', ');
                } else {
                    this.form.subjects = currentValue + newSubjects.join(', ');
                }
            }
            
            // 显示成功提示
            const skippedCount = subjectList.length - newSubjects.length;
            if (skippedCount > 0) {
                this.showToast(`成功插入 ${newSubjects.length} 个学科，跳过 ${skippedCount} 个重复学科`, 'success');
            } else {
                this.showToast(`成功插入 ${newSubjects.length} 个学科`, 'success');
            }
        },
        
        removeSubject(subject) {
            this.form.subjects = this.form.subjects.filter(s => s !== subject);
        },
        
        toggleSubject(subject) {
            if (this.form.subjects.includes(subject)) {
                this.removeSubject(subject);
            } else {
                this.form.subjects.push(subject);
            }
        },
        
        filterSubjectSuggestions() {
            const input = this.newSubject.toLowerCase();
            if (input.length > 0) {
                this.subjectSuggestions = this.allSubjectSuggestions
                    .filter(subject => subject.toLowerCase().includes(input))
                    .slice(0, 10);
            } else {
                this.subjectSuggestions = [];
            }
        },
        
        selectSubjectSuggestion(subject) {
            this.newSubject = subject;
            this.addSubject();
        },
        
        selectAllMainSubjects() {
            const mainSubjects = this.commonSubjects[0].subjects; // 主要学科
            mainSubjects.forEach(subject => {
                if (!this.form.subjects.includes(subject)) {
                    this.form.subjects.push(subject);
                }
            });
        },
        
        clearAllSubjects() {
            this.form.subjects = [];
        },
        
        showToast(message, type = 'info') {
            if (window.showToast) {
                window.showToast(message, type);
            } else {
                // 如果没有全局showToast函数，使用简单的alert
                alert(message);
            }
        }
    }
}
</script>
{{end}}